.checkbox {
  & input:checked {
    border-color: var(--mantine-color-white);
  }
}

.imageWrapper {
  &:hover .actionsWrapper {
    box-shadow: 0 -2px 6px 1px rgba(0, 0, 0, 0.16);
    background: light-dark(
      alpha(var(--mantine-color-gray-0), 0.6),
      alpha(var(--mantine-color-dark-6), 0.6)
    );
    opacity: 1;
  }
}

.actionsWrapper {
  border-radius: var(--mantine-radius-sm);
  transition: opacity 0.3s;
  box-shadow: 0 -2px 6px 1px rgba(0, 0, 0, 0.16);
  background: light-dark(
    alpha(var(--mantine-color-gray-0), 0.6),
    alpha(var(--mantine-color-dark-6), 0.6)
  );
  opacity: 0;

  @container (max-width: 420px) {
    width: 68px;
    opacity: 1;
  }
}

.favoriteButton {
  background: rgba(240, 62, 62, 0.5);
}

.improveMenu {
  border-radius: var(--mantine-radius-sm);
  background: light-dark(
    alpha(var(--mantine-color-gray-0), 0.8),
    alpha(var(--mantine-color-dark-6), 0.8)
  );
  border: none;
  box-shadow: 0 -2px 6px 1px rgba(0, 0, 0, 0.16);
  padding: 4px;
}
